<template>
    <div class="zg_videobox">
        <div class="zg_video">
            <div class="zg_video_bt">
            <span>
            <router-link :to="{path:'/class-'+courseId}">&lt; 返回课程主页</router-link>
            </span>
                {{currentLesson.title}}
            </div>
            <div class="zg_video_cont offcn_size">
                <div class="zg_shipin">
                    <div class="zg_shipin_cont" id="KeFuDiv">
                        <div class="zg19_lb_jzts" style="display:none">加载失败，请刷新重试</div>
                        <p class="xlzh" style="display:none;">线路切换中...</p>
                        <div style="width: 100%; height: 100%; " id="KeFuDivcontent">

<!--                            播放器-->
                            <div style="width: 100%;height:100%" v-show="showPlayer">
                                <video id="myvideoplayer"  class="video-js vjs-default-skin"
                                    controls
                                    autoplay="muted"
                                    preload="auto"
                                    style="width: 100%;height:100%"
                                >

                                </video>
                            </div>


                            <img src="../../public/images/offcn_shuaxinbg.jpg" class="playimg" v-if="showBuy">
                            <div class="playZD_kcqx" v-if="showBuy">
                                <dl>
                                    <dt>收费课程</dt>
                                    <dd>购买课程后可学习全部内容</dd>
                                    <dd><em class="kcxx">课程信息</em></dd>
                                    <dd>课件价格：{{(lessonData.coursePrice/100).toFixed(2)}}元</dd>
                                    <dd>课时：{{lessonData.courseHour}}</dd>
                                    <dd>在线人数：{{lessonData.saleCount}}人</dd>
                                    <dd>
                                        <a  id="J_submit_orders_zero" @click="buyCourse"  class="playZD_zbs">加入学习</a>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="kcbf_jiao" id="kcbf_jiao"></div>
                    <div class="zg_mulu" style="height: 598px;">
                        <div class="zg_mulu_bt"><span class="on"><i>目录</i></span></div>
                        <div class="tablecont osX">
                            <div id="pane1" class="scroll-pane mCustomScrollbar _mCS_1" style="position:relative;"><div id="mCSB_1" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_inside" tabindex="0"><div id="mCSB_1_container" class="mCSB_container" style="position:relative; top:0; left:0;" dir="ltr">
                                <ul class="mulunr">

                                    <li v-for="(lesson,index) in lessonList" :class="{'on':lesson.id==lessonId}">
                                        <em>{{index+1}}</em>
                                        <span   class="ioc01">
                                    <a class="spec1"  :href="getLessonRoute(lesson.id)" :title="lesson.title">
                                     【视频】{{index+1}}－{{lesson.title}}
                                    </a>
                                            [{{lesson.totalTime}}]
                                    </span>
                                    </li>


                                </ul>
                            </div><div id="mCSB_1_scrollbar_vertical" class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_vertical" style="display: block;"><div class="mCSB_draggerContainer"><div id="mCSB_1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; display: block; height: 412px; max-height: 429px;" oncontextmenu="return false;"><div class="mCSB_dragger_bar" style="line-height: 30px;"></div></div><div class="mCSB_draggerRail"></div></div></div></div></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="zg_video_bot">
                <div class="xlzz"><a class="da" href="javascript:void(0)"><em class="ioc01">&nbsp;</em>线路</a>
                    <p class="xlz"><a href="javascript:void(0);" onclick="onLinePlay(0);" class="hover"><em>√</em>线路1</a><a href="javascript:void(0);" onclick="onLinePlay(1);"><em>√</em>线路2</a><a href="javascript:void(0);" onclick="onLinePlay(2);"><em>√</em>线路3</a></p></div>
                <ul>
                    <li><a href="javascript:void(0);" id="house" style="color:#999;" data-id=""><em class="ioc02">&nbsp;</em>收藏</a></li>
                    <li><a href="javascript:void(0)"><em class="ioc04">&nbsp;</em>手机看</a>
                        <p class="app">
                            <span class="jiao">&nbsp;</span>
                            <font><strong><em>方式1</em>：用手机看</strong><img src="public/cimages/wx_it.png" width="106" height="106"></font>
                        </p>
                    </li>
                    <li><a href="/help/questionnaire/cid/76357/lid/1472577/" target="_blank"><em class="ioc06">&nbsp;</em>问题反馈</a></li>
                </ul>
                <div class="zg_video_msqh on" onclick="daymsqh(this);">白天模式</div>
                <div class="xlzz xlzz_new" @mouseover="speedShow" @mouseleave="speedHide">
                    <a class="da" id="vspeed" href="javascript:void(0)">
                        <em class="ioc02">&nbsp;</em>{{speedVal}}</a>
                    <p class="xlz" :style="speedStyle" >
                        <a  :class="speedSelectClass(1)" @click="onchangespeed(1)"><em>√</em>×1倍</a>
                        <a  :class="speedSelectClass(1.2)" @click="onchangespeed(1.2)"><em>√</em>×1.2倍</a>
                        <a  :class="speedSelectClass(1.35)" @click="onchangespeed(1.35)"><em>√</em>×1.35倍</a>
                        <a  :class="speedSelectClass(1.5)" @click="onchangespeed(1.5)"><em>√</em>×1.5倍</a>
                        <a  :class="speedSelectClass(1.6)" @click="onchangespeed(1.6)"><em>√</em>×1.6倍</a>
                        <a  :class="speedSelectClass(1.8)" @click="onchangespeed(1.8)"><em>√</em>×1.8倍</a>
                        <a  :class="speedSelectClass(2.0)" @click="onchangespeed(2.0)"><em>√</em>×2.0倍</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
 // video.js 安装
 // npm install video.js --save
 // npm install videojs-contrib-hls --save

 import videojs from 'video.js'
 import 'videojs-contrib-hls'


 import {getLessonPlanAPI,buyCourseAPI} from "../network/course";


 export default {

     name:'VideoPlay',
     data:function () {
        return {
            courseId:0,
            lessonId:0,
            lessonData:{},
            lessonList:[],
            currentLesson:{},
            myPlayer:{},
            speedStyle:'',
            speedVal:'',
            showBuy:false,
            showPlayer:false

        }
     },
     created() {
         this.$emit('showCate',false)

         this.lessonId = this.$route.params.id

         this.courseId = this.$route.query.courseId

         console.log(this.lessonId)
         console.log(this.courseId)

         this.$store.dispatch('refreshUserInfo')

         this.$nextTick(()=>{

             this.initPlayer()
             //请求数据
             this.getLessonList()

         })
     },
     methods:{
         initPlayer(){

           let _beforeRequest = videojs.Hls.xhr.beforeRequest;
           videojs.Hls.xhr.beforeRequest=function (options) {
                if(_beforeRequest && typeof _beforeRequest ==='function'){
                    options = _beforeRequest(options)
                }

                //添加Auth 头
               if(localStorage.getItem('TOKEN')){
                   options.headers = options.headers||{}
                   options.headers.Authorization ='Bearer '+localStorage.getItem('TOKEN')
               }
               return options
           }


            this.myPlayer = videojs('myvideoplayer',{
                bigPlayButton:false,
                textTrackDisplay:false,
                posterImage:false,
                errorDisplay:false,
                hls: {
                    withCredentials: true
                }
            })

         },
         getLessonList:function () {
             getLessonPlanAPI(this.courseId)
             .then(res=>{
                 console.log(res);
                 this.lessonData=res
                 this.showBuy=!this.lessonData.isBuy
                 this.showPlayer=this.lessonData.isBuy
                 this.lessonList=res.lessons
                 this.currentLesson=this.getCurrentLesson()

             })

         },
         getCurrentLesson:function () {
            let tempLesson = {title:'',videoUrl:''}
            if(this.lessonList){
                for(let i=0;i<this.lessonList.length;i++){
                    let lid = this.lessonList[i].id
                    if(this.lessonId == lid){
                        tempLesson = this.lessonList[i]
                        if(this.lessonData.isBuy &&  tempLesson.videoUrl){
                            this.myPlayer.src(
                                {
                                    src:tempLesson.videoUrl,
                                    type:'application/x-mpegURL',
                                    withCredentials: true
                                }
                            )
                        }
                    }
                }
            }
            return tempLesson
         },
         buyCourse:function () {

             //是否登录
             if(!this.$store.getters.getUserLogin){
                 this.$router.push('/foreuser/login')
             }else {
                 //调用购买API
                 buyCourseAPI(this.courseId)
                     .then(res=>{
                        this.lessonData.isBuy=true
                     })
             }

         },
         getLessonRoute:function (id) {
            return "/video-"+id+"?courseId="+this.courseId
         },
         onchangespeed:function (val) {
             this.speedVal=val
             this.myPlayer.playbackRate(val)
         },
         speedShow:function () {
            this.speedStyle='display:block'
         },
         speedHide:function () {
             this.speedStyle=''
         },
         speedSelectClass:function (val) {
            return val ===this.speedVal ?"hover on":''
         }

     }

 }

</script>
<style>
    @import "../../public/video/css/style.css";
    @import "../../public/video/css/style1200.css";
    @import "../../public/19ke/css/index.css";
    .offcn_newbtn {
        display: inline-block;
        *display: inline;
        zoom: 1;
        width: 86px;
        height: 24px;
        border: 1px solid #FF740F;
        margin-right: 10px;
        font-size: 12px;
        line-height: 24px;
        color: #ff740f;
        border-radius: 3px;
        text-align: center;
        margin-top: 12px;
    }

    .offcn_newbtn:hover {
        background: #ff740f;
        color: #fff;
        text-decoration: none;
    }
</style>